<template>
	<kui-page :custom-header="false">
		<template v-slot:body>
			<kui-config-provider font-size="18px" color="#666">
				<view class="kui-mt-3">
					<kui-text>基本用法</kui-text>
					<view class="kui-mt-2">
						<kui-cell title="测试标题" desc="测试描述内容" :show-right-icon="false"></kui-cell>
					</view>
					<view class="kui-mt-2">
						<kui-cell title="测试标题" sub-title="测试副标题" desc="测试描述内容" :show-right-icon="false"></kui-cell>
					</view>
					<view class="kui-mt-2">
						<kui-cell title="圆角大小 0" :radius="0" :show-right-icon="false"></kui-cell>
					</view>
				</view>
				<view class="kui-mt-3">
					<kui-text>使用插槽</kui-text>
					<view class="kui-mt-2">
						<kui-cell title="测试标题" :show-right-icon="false">
							<template v-slot:content>
								<kui-text>自定义插槽内容</kui-text>
							</template>
						</kui-cell>
					</view>
					<view class="kui-mt-2">
						<kui-cell title="测试标题">
							<template v-slot:right-icon>
								<kui-icons type="heart" color="red"></kui-icons>
							</template>
						</kui-cell>
					</view>
					<view class="kui-mt-3">
						<kui-cell-group title="链接 | 分组 | 常规布局" desc="分组描述内容">
							<kui-cell title="路由跳转" url="/pages/index/index"></kui-cell>
							<kui-cell title="链接 官网" url="http://www.kviewui.com"></kui-cell>
						</kui-cell-group>
					</view>
					<view class="kui-mt-3">
						<kui-cell-group title="链接 | 分组 | 间隔布局" desc="分组描述内容" type="space">
							<kui-cell title="路由跳转" url="/pages/index/index"></kui-cell>
							<kui-cell title="链接 官网" url="http://www.kviewui.com"></kui-cell>
						</kui-cell-group>
					</view>
					<view class="kui-mt-2">
						<kui-text>自定义左侧图标</kui-text>
						<view class="kui-mt-2">
							<kui-cell title="自定义图标" :show-right-icon="false">
								<template v-slot:left-icon>
									<kui-icons type="image"></kui-icons>
								</template>
							</kui-cell>
						</view>
					</view>
					<view class="kui-mt-2">
						<kui-text>展示图标</kui-text>
						<view class="kui-mt-2">
							<kui-cell title="标题" desc="描述内容" icon="image">
							</kui-cell>
						</view>
					</view>
					<view class="kui-mt-2">
						<kui-text>垂直居中</kui-text>
						<view class="kui-mt-2">
							<kui-cell title="标题" sub-title="副标题" desc="描述内容" center>
							</kui-cell>
						</view>
					</view>
				</view>
			</kui-config-provider>
		</template>
	</kui-page>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>

<style>

</style>
